{% extends "gt_base.html" %}

{% load image_resize %}

{% block title %}{{ photo.name }}{% endblock %}

{% block content %}
        <div class="PhotoContent" style="height: {{ photo.image|750h254 }}px;">

            <div class="TL"></div>
            <div class="TR"></div>
            <div class="BL"></div>
            <div class="BR"></div>
            <div class="Top"></div>
            <div class="Bottom"></div>
            <div class="Right"></div>
            <div class="Left"></div>
            
            <div id="PrevButton" style="top:{{ photo.image|750h20 }}px;">
                <a href="IMG_015081.html"><img src="http://groundtruthtrekking.org/Images/Slideshows/SlideThumbs/IMG_015081-01.png" alt="button for previous image" /></a>
                <a href="IMG_015081.html">CoalCountry slideshow<br />11 of 15</a>
            </div>
            
            <div id="NextButton" style="top:{{ photo.image|750h20 }}px;">
                <a href="IMG_014026.html"><img src="http://groundtruthtrekking.org/Images/Slideshows/SlideThumbs/IMG_014026-02.png" alt="button for next image" /></a>
                <a href="IMG_014026.html">CoalCountry slideshow<br />13 of 15</a>
            </div>
            
            <object style="height: {{ photo.image|750h }}px; width: {{ photo.image|750w }}px;" id="MainPhoto" type="text/html" data="{% url photo-page-title photo.pk %}"></object>
            <br style="clear:both;" />
        </div>
        <div class="Content">
            <div class="TL"></div><div class="TR"></div><div class="BL"></div><div class="BR"></div><div class="Top"></div><div class="Bottom"></div><div class="Right"></div><div class="Left"></div>
            <p id="ShortCaption">{{ photo.caption }}</p>
            <iframe class="GoogleMap" src="{% url photo-map-embed photo.pk %}" scrolling="no" frameborder="0"></iframe>

            <p id="Photographer">Photo by:  {{ photo.photographer }}</p>
            <p id="LongCaption">{{ photo.long_caption }}</p>
            <br style="clear:both;" />
        </div>
        <div class="Content">
            <div class="TL"></div><div class="TR"></div><div class="BL"></div><div class="BR"></div><div class="Top"></div><div class="Bottom"></div><div class="Right"></div><div class="Left"></div>
            <div id="AuthorshipInfo" class="Island">

                <div class="TL"></div><div class="TR"></div><div class="BL"></div><div class="BR"></div><div class="Top"></div><div class="Bottom"></div><div class="Right"></div><div class="Left"></div>
                <a class="LicenseType" target="_blank" href="http://creativecommons.org/licenses/by-nc/3.0/"></a>
                <p><a href="http://www.groundtruthtrekking.org/WildResource.html">Alaska's Wild Resource Web</a> is brought to you by <a href="http://www.groundtruthtrekking.org">Ground Truth Trekking</a>. Content on this page is available under an <a class="external" target="_blank" href="http://creativecommons.org/licenses/by-nc/3.0/">Attribution/Non-commercial Creative Commons License</a>. For commercial uses please <a href="http://www.groundtruthtrekking.org/Contact.php">contact us</a>.</p>
            </div> 
            <div id="Embed" class="Island">

                <div class="TL"></div><div class="TR"></div><div class="BL"></div><div class="BR"></div><div class="Top"></div><div class="Bottom"></div><div class="Right"></div><div class="Left"></div>
                <h3>Embed this in your web page</h3>
                <br />
                <h4>With caption (300px)</h4>
                <input type="text" value="&lt;object style=&quot;width: 320px; height: 200px;&quot; type=&quot;text/html&quot; data=&quot;http://groundtruthtrekking.org/Images/300/IMG_039775-ShortCap.html&quot;&gt;&lt;/object&gt;" readonly="readonly" />
                <h4>Without caption (300px)</h4>
                <input type="text" value="&lt;object style=&quot;width: 320px; height: 168px;&quot; type=&quot;text/html&quot; data=&quot;http://groundtruthtrekking.org/Images/300/IMG_039775.html&quot;&gt;&lt;/object&gt;" readonly="readonly" />

            </div> 
            <h2>GET THIS PHOTO!</h2>
            <div id="Download" class="Island">
                <div class="TL"></div><div class="TR"></div><div class="BL"></div><div class="BR"></div><div class="Top"></div><div class="Bottom"></div><div class="Right"></div><div class="Left"></div>
                <h3>Download the jpg.</h3>
                <p style="font-size: 0.75em;">Right-click on the size you want, and select "save link as..."</p>
                <table>
                    <tr><th>Image Size</th><th>Filesize</th></tr>

                    <tr><td><a href="{{ photo.image|small }}">300 px</a></td><td>25 kb</td></tr>
                    <tr><td><a href="{{ photo.image|medium }}">600 px</a></td><td>45 kb</td></tr>
                    <tr><td><a href="{{ photo.image|750 }}">750 px</a></td><td>59 kb</td></tr>
                    <tr><td><a href="{{ photo.image|large }}">1600 px</a></td><td>184 kb</td></tr>
                    <tr><td><a href="{{ photo.image.url }}">Original</a></td><td>818 kb</td></tr>

                </table>
            </div>
            <br style="clear:both;" />
        </div>
{% endblock %}